<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input placeholder="请输入菜单名" v-model="menusname" ></el-input>
            </el-col>
            <el-col :span="5">

            </el-col>
            <el-col :span="7">
                <el-button  type="primary" icon="el-icon-search" @click="querybymname">查询</el-button>
            </el-col>
            <el-col :span="3">
                <el-dropdown split-button type="primary">
                    添加菜单
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item ><el-button type="success" icon="el-icon-circle-plus"  @click="addmenusby01">添加一级菜单</el-button></el-dropdown-item>
                        <br>
                        <el-dropdown-item ><el-button type="success" icon="el-icon-circle-plus"  @click="addmenusby02">添加二级菜单</el-button></el-dropdown-item>
                        <br>
                        <el-dropdown-item ><el-button type="success" icon="el-icon-circle-plus"  @click="addmenusby03">添加三级菜单</el-button></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
            <br><br><br>
            <el-col :span="6">
                <template>
                    <el-popconfirm
                            v-if="this.check==1"
                            confirm-button-text='确定'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="你确定禁用吗？"
                            @confirm="alterallmenus"
                    >
                        <el-button
                                slot="reference"
                                type="danger"
                                icon="el-icon-error">批量禁用</el-button>
                    </el-popconfirm>
                    <el-popconfirm
                            v-else
                            confirm-button-text='确定'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="你确定启用吗？"
                            @confirm="alterallmenus"
                    >
                        <el-button
                                slot="reference"
                                type="success"
                                icon="el-icon-error">批量启用</el-button>
                    </el-popconfirm>
                </template>
                <el-button @click="cut">切换</el-button>
            </el-col>
        </el-row>
        <br> <br>

            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55"
                >
                </el-table-column>
                <el-table-column
                        label="菜单名"
                        width="120">
                    <template slot-scope="scope">{{ scope.row.mname}}</template>
                </el-table-column>
                <el-table-column
                        prop="parentId"
                        label="父级菜单id"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="状态"
                        show-overflow-tooltip>
                    <template slot-scope="scope" >
                        <span v-if="scope.row.state==0">启用中</span>
                        <span v-else>禁用中</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="功能"
                        show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button type="warning" @click="editmenusbyid(scope.row.id)">修改</el-button>
                        <el-popconfirm v-if="scope.row.state==0"
                                       confirm-button-text='确定'
                                       cancel-button-text='取消'
                                       icon="el-icon-info"
                                       icon-color="red"
                                       title="你确定禁用吗？"
                                       @confirm="altermenusbyid(scope)"
                        >
                            <el-button

                                    slot="reference"
                                    type="danger"
                                    icon="el-icon-error">禁用菜单</el-button>
                        </el-popconfirm>
                        <el-popconfirm v-else
                                       confirm-button-text='确定'
                                       cancel-button-text='取消'
                                       icon="el-icon-info"
                                       icon-color="red"
                                       title="你确定启用吗？"
                                       @confirm="altermenusbyid(scope)"
                        >
                            <el-button

                                    slot="reference"
                                    type="success"
                                    icon="el-icon-error">启用菜单</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        <el-row>
            <el-col :span="5">
                <div style="margin-top: 20px">
                    <!--                <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
                    <el-button @click="toggleSelection()">取消选择</el-button>
                </div>
            </el-col>

            <el-col :span="5">
                <template>
                    <div class="block">
                        <span class="demonstration"></span>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageno"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="pagesize"
                                layout="total, sizes, prev, pager , next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </template>
            </el-col>

        </el-row>


        <!-- 添加一级菜单模态框-->
        <el-dialog
                title="一级菜单添加"
                :visible.sync="dialog01"
                width="40%"
                :before-close="handleClose">
            <el-form :model="menus" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="菜单名" prop="mName">
                    <el-input v-model="menus.mName"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标">
                    <el-select
                            v-model="menus.icon"
                            filterable
                            allow-create
                            default-first-option
                            placeholder="请选择文章标签(可自定义)">
                        <el-option
                                v-for="item in iconall"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            <span style="float: right; color: #8492a6; font-size: 13px"><i>{{item.label}}</i></span>
                            <span  ><i :class="item.value"></i></span>
                        </el-option>
                        <br>
                        <a href="https://element.eleme.cn/#/zh-CN/component/icon">更多的图标</a>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">关 闭</el-button>
  </span>
        </el-dialog>
        <!-- 添加二级菜单模态框-->
        <el-dialog
                title="二级菜单添加"
                :visible.sync="dialog02"
                width="40%"
                :before-close="handleClose">
            <el-form :model="menus" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="父菜单" prop="parentId">
                    <el-select v-model="menus.parentId" placeholder="请选择父菜单">
                        <el-option
                                v-for="item in parenname"
                                :key="item.id"
                                :label="item.mname"
                                :value="item.id">

                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单名" prop="mName">
                    <el-input v-model="menus.mName"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标">
                    <el-select
                            v-model="menus.icon"
                            filterable
                            allow-create
                            default-first-option
                            placeholder="请选择菜单图标(可自定义)">
                        <el-option
                                v-for="item in iconall"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            <span style="float: right; color: #8492a6; font-size: 13px"><i>{{item.label}}</i></span>
                            <span  ><i :class="item.value"></i></span>
                        </el-option>
                        <br>
                        <a href="https://element.eleme.cn/#/zh-CN/component/icon">更多的图标</a>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-checkbox-group v-model="resource">
                        <el-checkbox label="是否为触发菜单" @change="resourcechange" ></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="触发路径" >
                    <el-input v-model="menus.linkUil" :disabled="doyes"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">关 闭</el-button>
  </span>
        </el-dialog>
        <!-- 添加三级菜单模态框-->
        <el-dialog
                title="三级菜单添加"
                :visible.sync="dialog03"
                width="40%"
                :before-close="handleClose">
            <el-form :model="menus" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="父菜单" prop="parentId">
                    <el-select v-model="menus.parentId" placeholder="请选择父菜单">
                        <el-option
                                v-for="item in parenname"
                                :key="item.id"
                                :label="item.mname"
                                :value="item.id">

                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单名" prop="mName">
                    <el-input v-model="menus.mName"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标">
                    <el-select
                            v-model="menus.icon"
                            filterable
                            allow-create
                            default-first-option
                            placeholder="请选择菜单图标(可自定义)">
                        <el-option
                                v-for="item in iconall"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            <span style="float: right; color: #8492a6; font-size: 13px"><i>{{item.label}}</i></span>
                            <span  ><i :class="item.value"></i></span>
                        </el-option>
                        <br>
                        <a href="https://element.eleme.cn/#/zh-CN/component/icon">更多的图标</a>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-checkbox-group v-model="resource">
                        <el-checkbox label="是否为触发菜单" @change="resourcechange02" ></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="触发路径" >
                    <el-input v-model="menus.linkUil" :disabled="doyes02"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">关 闭</el-button>
  </span>
        </el-dialog>
        <!-- 修改菜单的模态框-->
        <el-dialog
                title="修改菜单"
                :visible.sync="dialog04"
                width="40%"
                :before-close="handleClose">
            <el-form :model="menus" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="菜单名" prop="mName">
                    <el-input v-model="menus.mName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">关 闭</el-button>
  </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "MenusTyy",
        data() {
            return {
                check:1,
                doyes:true,
                resource:"",
                iconall: [{
                    value: 'el-icon-eleme',
                    label: 'el-icon-eleme'
                }, {
                    value: 'el-icon-delete-solid',
                    label: 'el-icon-delete-solid'
                }, {
                    value: 'el-icon-phone',
                    label: 'el-icon-phone'
                }, {
                    value: 'el-icon-star-on',
                    label: 'el-icon-star-on'
                }, {
                    value: 'el-icon-camera-solid',
                    label: 'el-icon-camera-solid'
                }, {
                    value: 'el-icon-s-fold',
                    label: 'el-icon-s-fold'
                }],
                menus:{
                    mName:"",
                    icon:"",
                    linkUil:"",
                    parentId:""
                },
                doyes02:"",
                parenname:[],
                menusgrade:"",
                dialog01:false,
                dialog02:false,
                dialog03:false,
                dialog04:false,
                pageno:1,   //页码
                pagesize:5,   //页size
                total:1,   //查询到的总记录数量
                grade:"",
                menusname:"",
                tableData: [],
                multipleSelection: [],
                rules: {
                    mName: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    parentId: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                    ],
                }
            }
        },

        methods: {
            resourcechange(){
                if (this.resource){
                    this.doyes=false
                }else {
                    this.menus.linkUil=""
                    this.doyes=true
                }
            },
            resourcechange02(){
                if (this.resource){
                    this.doyes02=false
                }else {
                    this.menus.linkUil=""
                    this.doyes02=true
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let menus = new URLSearchParams();
                        Object.keys(this.menus).forEach(key=>{
                            menus.append(key,this.menus[key])
                        })
                            menus.append("menusgrade",this.menusgrade);
                        this.$axios.post("addmenus.action",menus).
                        then(request=>{
                            if (request.data.msg=="添加成功"){
                                this.$message.success("添加成功")
                                this.getmenus();
                                this.dialog01=false;
                                this.dialog02=false;
                                this.dialog03=false;
                                this.menus.icon =""
                                this.menus.linkUil=""
                                this.resource=false
                                this.$refs[formName].resetFields();
                            }else {
                                this.$message.error("添加失败")
                            }
                        }).catch()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.menus.linkUil=""
                this.menus.icon =""
                this.resource=false
                this.$refs[formName].resetFields();
            },
            getmenus(){
                var menus = new URLSearchParams();
                menus.append("pageno",this.pageno);
                menus.append("pagesize",this.pagesize);
                menus.append("mName",this.menusname)
                menus.append("grade",this.grade)

               this.$axios.post("querallmenus.action",menus).
               then(request=>{
                   console.log(request.data.records)
                   this.tableData = request.data.records.filter(item=>{
                       return item.mname!="系统管理" && item.mname!="菜单管理" && item.mname!="菜单维护"
                   })
                   this.total = request.data.total

               }).
               catch()

            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //查根据菜单名查询菜单
            querybymname(){
                this.menusname = this.menusname
                this.getmenus()
            },
            handleSizeChange(val) {

                this.pagesize = val;
                this.getmenus()
            },
            handleCurrentChange(val) {

                this.pageno = val;
                this.getmenus()
            },
            //添加1级菜单
            addmenusby01(){
                this.dialog01 = true
                this.menusgrade=1;
            },
            //添加二级菜单
            addmenusby02(){
                this.dialog02 = true
                this.menusgrade=2;
                this.querallfirstmenus()
            },
            //查找所有一级菜单
            querallfirstmenus(){
                this.$axios.get("querallfirstmenus.action").
                then(menus=>{
                    this.parenname = menus.data
                }).
                catch()
            },
            //添加三级菜单
            addmenusby03(){
                this.dialog03 = true
                this.menusgrade=3;
                this.querallsecond()
            },
            //查询所有的耳机菜单
            querallsecond(){
              this.$axios.get("querallsecondmenus.action").
              then(menus=>{
                  console.log(menus.data)
                  this.parenname =menus.data
              }).
              catch()
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.menus.linkUil=""
                        this.menus.mName=""
                        this.menus.icon=""
                        this.resource=false
                        this.dialog01=false
                        this.dialog02=false
                        this.dialog03=false;
                        this.doyes=true;
                        this.doyes02=true;
                        this.dialog04=false;
                    })
                    .catch(_ => {});
            },
            //修改状态
            altermenusbyid(scode){
                let menus = new URLSearchParams();

                menus.append("id",scode.row.id)
                menus.append("state",scode.row.state)
                this.$axios.post("altermenusbyid.action",menus).
                then(request=>{
                    if (request.data.msg=="修改成功"){
                        this.$message.success("修改成功")
                        this.getmenus()
                    }else {
                        this.$message.error("修改失败")
                    }
                }).
                catch()
            },
            //批量修改
            alterallmenus(){
                let menus = new URLSearchParams();
                let state = [];
                this.multipleSelection.forEach(item=>{

                        menus.append("mid",item.id)
                        menus.append("state",item.state)
                        state.push(item.state);

                })

                if (this.check==1 && state.indexOf(1)==-1 || this.check==2 && state.indexOf(0)==-1) {
                    this.$axios.post("alterallmenus.action",menus).
                    then(request=>{
                        if (request.data.msg="修改成功"){
                            this.$message.success("修改成功")
                            this.getmenus()
                        }else {
                            this.$message.error("修改失败")
                        }
                    }).
                    catch()
                }else {
                    this.$message.error("检测到错误的选项框勾选!!")
                }


            },
            //切换修改按钮
            cut(){
                if (this.check==1){
                    this.check=2
                    this.getmenus()
                }else {
                    this.check=1
                    this.getmenus()
                }

            },
            //修改
            editmenusbyid(id){
                this.dialog04 = true

            }
        },created() {
            this.getmenus()
        }
    }
</script>

<style scoped>

</style>